<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>九宫格抽卡</title>
    <style type="text/css">
        body { margin: 0; overflow: hidden; background-color: #f5f5f5;}
        input { border-bottom: 2px #00ff7f solid;}
        #top-tip {
            width: 100vw;
            height: fit-content;
            position: fixed;
            top: 0;
        }
        #tool {
            width: 100vw;
            height: 60px;
            position: fixed;
            top: 0;
            display: flex;
            align-items: center;
        }
        #tool div {
            width: 3em;
            height: 40px;
            margin: 10px;
            text-align: center;
            font-size: 1.2em;
            letter-spacing: .2em;
            line-height: 38px;
            color: gray;
            cursor: pointer;
            transition: .2s;
        }
        #tool div:first-child { margin-left: 2em;}
        #tool div:hover { border-bottom: 5px lightblue solid; height: 35px; color: #ef632b;}
        #main {
            position: relative;
            top: 60px;
            margin: 0 auto;
            width: 720px;
            height: 720px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-around;
            overflow-y: scroll;
            scrollbar-width: 0;
        }
        #set {
            width: 100vw;
            height: calc(100vh - 60px);
            position: fixed;
            top: 60px;
            left: -100vw;
            background-color: #b0d5df;
            opacity: .8;
            transition: 1s;
            overflow-y: scroll;
        }
        #set-add {
            font-size: 1.4em;
            text-align: center;
            line-height: 60px;
            letter-spacing: .2em;
            border-bottom: 5px gray solid;
            background-color: inherit;
            cursor: copy;
        }
        #set-add:hover { border-bottom: 5px #98ff98 solid;}
        .card {
            width: 160px;
            height: 160px;
            margin-bottom: 1em;
            background-color: #2486b9;
            border: 4px #f5f2ff solid;
            border-radius: 9%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.6em;
            padding: 1em;
            cursor: pointer;
            transition: 1s;
            overflow: hidden;
        }
        .card:hover {
            border: 4px #57c3c2 solid;
        }
        .con {
            width: 460px;
            height: 50px;
            position: relative;
            margin: 10px auto;
            border-radius: 20px;
            background-color: #12a182;
            text-align: center;
            line-height: 48px;
            font-size: 24px;
            overflow: hidden;
        }
        .con span {
            text-align: left;
            margin-right: 1em;
            cursor: pointer;
        }
        .con p {
            width: 400px;
            display: inline-block;
            white-space: nowrap;
            text-overflow: clip;
            margin: 0;
        }
        .con input {
            border: none;
            background-color: inherit;
            font-size: 20px;
            outline: none;
        }
        .tip-box {
            min-width: 6en;
            width: fit-content;
            max-width: 80vw;
            height: 1.8em;
            position: relative;
            margin: 10px auto;
            line-height: 1.8em;
            font-size: 1.2em;
            text-align: center;
            border-radius: .8em;
            padding: 0 9px 0 9px;
        }
        .background-box {
            width: 100vw;
            height: 100vh;
            position: fixed;
            top: 0;
            left: 0;
            background-color: #d7ebff;
            z-index: -1;
        }
        
        @media screen and (max-width: 720px) {
            #main {
                width: 96vw;
                height: fit-content;
                margin: 50px 0 5vw 2vw;
                max-height: calc(100vh - 40px);
            }
            .card {
                width: 22vw;
                height: 28vw;
                margin-bottom: 30px;
                font-size: 16px;
                padding: 2vw;
            }
            .con {
                width: 90vw;
                font-size: 22px;
            }
            .con p {
                width: calc(90vw - 80px);
            }
        }
    </style>
</head>
<body>
    <div id="tool">
        <div onclick="setting()">设置</div>
        <div onclick="startGame()">开始</div>
        <div onclick="fullScreen()">全屏</div>
    </div>
    <div id="main" onclick="play(event)">
    </div>
    <div id="set">
        <div id="set-add" type="add">添加卡牌</div>
        <div class="con"><span type="delCard">🗑️</span><p type="p">空白卡</p></div>
        <div class="con"><span type="delCard">🗑️</span><p type="p">空白卡</p></div>
    </div>
    <div class="background-box"></div>
    <div id="top-tip"></div>

    <script>
        let setBox = document.getElementById("set");
        let mainBox = document.getElementById("main");
        let card = document.createElement("div");
        card.setAttribute("class", "card");
        card.setAttribute("face", "close");
        let inputBox = document.createElement("input");

        let editMoment = false;
        let playMoment = "setting";
        let cardCount = 2;
        let cards = [];

        const cardNames = ["🃏🃏🃏", "🙄🙄🙄","🥺🥺🥺",  "👻👻👻", "👑👑👑", "✨✨✨", "🎅🎅🎅", "🔥🔥🔥", "☝️☝️☝️","❤️❤️❤️", "❓❓❓"];
        const cardTip = ["想好选哪张了吗?", "确定选我吗？", "别选我>-<", "选我选我吖！", "别把鼠标放过来啊~~~", "这就是命运的选择吗?"];
        const openTip = ["👐谜团揭晓👐", "要开牌了⏳", "👀我先看看", "📦打开了哟"];

        class Set {
            constructor(elem) {
                this._elem = elem;
                elem.onclick = this.onClick.bind(this);
            }
            add(event) {
                let setCon = document.createElement("div");
                setCon.classList = "con";
                setCon.innerHTML = "<span type='delCard'>🗑️</span><p type='p'>空白卡</p>"
                setBox.append(setCon);
                cardCount++;
            }
            delCard(event) {
                if(cardCount > 2){
                    event.target.parentNode.remove();
                    cardCount--;
                }
                else popTopTip("red", "至少保留2项内容。");
            }
            exitEdit(event) {
                editMoment = false;
                let cardValue = event.target.nextSibling.value===""?"空白卡":event.target.nextSibling.value;
                event.target.nextSibling.outerHTML = "<p type='p'></p>";
                event.target.nextSibling.innerHTML =  cardValue;
                event.target.innerHTML = "🗑️";
                event.target.setAttribute("type", "delCard");
            }
            p(event) {
                if(editMoment) return 0;
                event.target.previousSibling.innerHTML = "🟢";
                event.target.previousSibling.setAttribute("type", "exitEdit");
                editMoment = true;
                event.target.outerHTML = inputBox.outerHTML;
            }
            onClick(event) {
                let action = event.target.getAttribute("type");
                if(action) {
                    this[action](event);
                }
            }
        }
        new Set(setBox);
        setting();

        
        function setting() {
            setBox.style.left = "0";
            playMoment = "setting";
        }
        function startGame() {
            if(editMoment === "setting") {
                popTopTip("red", "请完成编辑后开始。");
                return 0;
            }
            setBox.style.left = "-100vw";
            playMoment = "start";
            mainBox.innerHTML = "";
            let pList = document.getElementsByTagName("p");
            for(let i=0; i<cardCount; i++) {
                cards[i] = pList[i].innerHTML;
                card.innerHTML = cardNames[randomNum(0, cardNames.length-2)];
                card.title = cardTip[randomNum(0, cardTip.length-1)];
                mainBox.innerHTML += card.outerHTML;
            }
            popTopTip("green", "🎇🎇开始抽卡🎇🎇");
        }
        // 翻牌动作逻辑
        function play(event) {
            if(playMoment === "start") {
                if(event.target.className === "card"&&event.target.getAttribute("face") === "close"){
                    popTopTip("green", openTip[randomNum(0, openTip.length-1)]);
                    event.target.innerHTML = cardNames[10];
                    setTimeout(function() {
                        event.target.innerHTML = cards.splice(randomNum(0, cards.length-1), 1);
                    }, 1300)
                    event.target.setAttribute("face", "open");
                    event.target.style.backgroundColor = "#d0dfe6";
                }
                if(cards.length === 0) popTopTip("yellow", "已经抽完了哦👻");
            }
        }

        // tipType: 消息框类型||red : yellow : green
        // text : 消息框文本内容（字符型）
        function popTopTip(tipType, text) {
            let tipBox = document.createElement("div");
            tipBox.className = "tip-box";
            if(tipType === "red") {
                tipBox.style.color = "#F70909";
                tipBox.style.backgroundColor = "#FFB6C1";
            }
            else if(tipType === "yellow") {
                    tipBox.style.color = "#FFD700";
                    tipBox.style.backgroundColor = "#FAFAD2";
                }
                else {
                    tipBox.style.color = "#3c763d";
                    tipBox.style.backgroundColor = "#dff0d8";
                }
            tipBox.innerText = text;
            document.getElementById("top-tip").append(tipBox);
            setTimeout(() => tipBox.remove(), 1200);
        }

        function randomNum(minNum,maxNum){ 
            switch(arguments.length){ 
                case 1: 
                    return parseInt(Math.random()*minNum+1,10); 
                break; 
                case 2:
                    return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10); 
                break; 
                    default: 
                        return 0; 
                    break; 
            } 
        }
        
        function fullScreen() {
            let element = document.body;
            if (element.requestFullscreen) {
               element.requestFullscreen();

             } else if (element.mozRequestFullScreen) {
               element.mozRequestFullScreen();
            
             } else if (element.webkitRequestFullscreen) {
               element.webkitRequestFullscreen();
            
             } else if (element.msRequestFullscreen) {
               element.msRequestFullscreen();
            
             }
        } 


    </script>
</body>
</html>